<template>
  <div class="topologyMenu">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
    >
      <el-menu-item index="/Topological/TopologyDiagram/FirstPage">拓扑图</el-menu-item>
      <el-menu-item index="/Topological/TopologyManage">拓扑管理</el-menu-item>
      <el-menu-item index="/Topological/DeviceManage">设备管理</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  created() {
    this.InitActiveIndex();
  },
  data() {
    return {
      activeIndex: "/Topological/TopologyDiagram/FirstPage",
    };
  },
  watch: {},
  methods: {
    InitActiveIndex() {
      this.activeIndex = this.$route.fullPath;
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    handleSelect(index, indexPath) {
      // console.log(index, indexPath);
    },
  },
};
</script>

<style scoped>
.topologyMenu >>> .el-menu--horizontal > .el-menu-item {
  height: 40px;
  line-height: 40px;
}
</style>
